Flex 알아보기

Flex = Html 문서내 엘리먼트들의 배열을 도와준다.

https://flexboxfroggy.com/#koFlex 좀더 이해하기 쉽게 만들어주는 게임.

• 동일레벨의 엘리먼트들을 클래스 셀렉터를 사용해 css 로 display : flex; 를 설정 후 다음의 속성들을 부여한다.

• justify-content => 엘레멘트 그룹 가로배열

  • flex-start: 요소들을 컨테이너의 왼쪽으로 정렬합니다.
  • flex-end: 요소들을 컨테이너의 오른쪽으로 정렬합니다.
  • center: 요소들을 컨테이너의 가운데로 정렬합니다.
  • space-between: 요소들 사이에 동일한 간격을 둡니다.
  • space-around: 요소들 주위에 동일한 간격을 둡니다.

• align-items =>엘레멘트 그룹 세로배열

  • flex-start: 요소들을 컨테이너의 꼭대기로 정렬합니다.
  • flex-end: 요소들을 컨테이너의 바닥으로 정렬합니다.
  • center: 요소들을 컨테이너의 세로선 상의 가운데로 정렬합니다.
  • baseline: 요소들을 컨테이너의 시작 위치에 정렬합니다.
  • stretch: 요소들을 컨테이너에 맞도록 늘립니다.

• Flex-direction - 엘레멘트 그룹내 배열 방법 및 순서

  • row: 요소들을 텍스트의 방향과 동일하게 정렬합니다.
  • row-reverse: 요소들을 텍스트의 반대 방향으로 정렬합니다.
  • column: 요소들을 위에서 아래로 정렬합니다.
  • column-reverse: 요소들을 아래에서 위로 정렬합니다.

• order 엘레멘트 그룹내 순서 개별조정

  • 속성을 각 요소에 적용할 수 있습니다. order의 기본 값은 0이며, 양수나 음수로 바꿀 수 있습니다.
  • 0 자기 포지션,
  • ++ 오른쪽, 아래쪽,
  • — 왼쪽, 위쪽

• align-self

  • align-item 개별 적용

• flex-wrap 엘레멘트 그룹내 줄 맞춤

  • nowrap: 모든 요소들을 한 줄에 정렬합니다.
  • wrap: 요소들을 여러 줄에 걸쳐 정렬합니다.
  • wrap-reverse: 요소들을 여러 줄에 걸쳐 반대로 정렬합니다.

• flex-flow

  • flex-direction과 flex-wrap 합체

• align-content 엘레멘트 그룹내 ( 여러줄로( flex-wrap: wrap) )

  • flex-start: 여러 줄들을 컨테이너의 꼭대기에 정렬합니다.
  • flex-end: 여러 줄들을 컨테이너의 바닥에 정렬합니다.
  • center: 여러 줄들을 세로선 상의 가운데에 정렬합니다.
  • space-between: 여러 줄들 사이에 동일한 간격을 둡니다.
  • space-around: 여러 줄들 주위에 동일한 간격을 둡니다.
  • stretch: 여러 줄들을 컨테이너에 맞도록 늘립니다.